<template>
    <div class="app">
        <myNavbar title="退款售后"></myNavbar>
        <list>
            <cell>
                <div class="details_box">
                    <image class="details_box_header_bg" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
                    <div class="details_status">
                        <text class="details_status_title">{{orderForm.statusDescr}}</text>
                    </div>
                    <div class="details_information" v-if="orderLog.length !=0">
                        <div class="details_information_content" v-for="(item,index) in orderLog">
                            <div class="details_information_left">
                                <div :class="[index == 0 ?'details_information_round_current':'details_information_round']">
                                    <text v-if="item.type==0" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe606;</text>
                                    <text v-if="item.type==1" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe631;</text>
                                    <text v-if="item.type==2 || item.type==7" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
                                    <text v-if="item.type==3" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe69f;</text>
                                    <text v-if="item.type==4" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe6ea;</text>
                                    <text v-if="item.type==5" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe625;</text>
                                    <text v-if="item.type==6" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe614;</text>
                                    <text v-if="item.type==8" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe664;</text>
                                    <text v-if="item.type==9" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe612;</text>
                                </div>
                                <div v-if="index+1 != orderLog.length" :class="[index == 0?'details_information_line_current':'details_information_line']"></div>
                            </div>
                            <div class="details_information_text">
                                <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.content}}</text>
                                <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.createDate}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="details_address" v-if="orderForm.areaName !=nuderfind">
                        <div class="details_address_top">
                            <text class="details_address_name">{{orderForm.consignee}}</text>
                            <text class="details_address_phone">{{orderForm.phone}}</text>
                            <div class="details_lines"></div>
                            <text class="details_right_copy" @click="copyAddressClick">复制</text>
                        </div>
                        <div class="details_address_bottom">
                            <text class="details_address_title">{{orderForm.address}}</text>
                        </div>
                    </div>

                    <div class="details_order" v-if="itemList.length !=0">
                        <div class="details_order_item" v-for="item in itemList">
                            <div class="details_order_item_img">
                                <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                            </div>
                            <div class="details_order_item_content">
                                <div class="details_order_item_content_top">
                                    <text class="details_order_item_title">{{item.name}}</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_red_icon">¥</text>
                                        <text class="details_order_red_font">{{item.price}}</text>
                                    </div>
                                </div>
                                <div class="details_order_item_content_bottom">
                                    <text class="details_order_item_subtitle">{{item.spec}}</text>
                                    <text class="details_order_item_number"> x {{item.quantity}}</text>
                                </div>
                            </div>
                        </div>
                        <div class="details_order_item_bottom">
                            <div class="row_sb_mg20">
                                <text class="details_order_item_bottom_titel">商品总价</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon">¥</text>
                                    <text class="details_order_black_font">{{orderForm.subPrice}}</text>
                                </div>
                            </div>
                            <div class="row_sb_mg20">
                                <text class="details_order_item_bottom_titel">运费：</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon" v-if="orderForm.shippingFreight != 0">¥</text>
                                    <text class="details_order_black_font">{{orderForm.shippingFreight == 0 ?'免费':orderForm.shippingFreight}}</text>
                                </div>
                            </div>
                            <div class="row_sb_mg20" v-if="orderForm.levelFreight != 0">
                                <text class="details_order_item_bottom_titel">楼层费：</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_black_icon">¥</text>
                                    <text class="details_order_black_font">{{orderForm.levelFreight}}</text>
                                </div>
                            </div>
                        </div>
                    </div>

<!--                    <div class="submit_payMethod">-->
<!--                        <div class="submit_payMethod_Header">-->
<!--                            <text class="submit_payMethod_Header_Title">退款原因:{{orderForm.reason}}</text>-->
<!--                        </div>-->

<!--                    </div>-->
                    <div class="details_order_information">
                        <div class="details_information_row">
                            <text class="details_information_row_title">订单编号</text>
                            <text class="details_information_row_content">{{orderForm.sn}}</text>
                            <div class="details_information_row_line"></div>
                            <text class="details_information_row_botton" @click="copyClick">复制</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">退款时间</text>
                            <text class="details_information_row_content">{{orderForm.createDate}}</text>
                        </div>
                    </div>
                    <div style="width:100%;height:100px;"></div>
                </div>
            </cell>
        </list>
        <div class="button_content" v-if="orderForm.shippingStatus==1">
            <div class="button-click"  @click="refundsClick"><text style=" font-size: 20px; color: white;">确认退款</text></div>
        </div>

    </div>
</template>

<script>
    const picker = weex.requireModule('picker')
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    // import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import {
        find,received
    } from '../../api/return.js';
    const eeui = app.requireModule('eeui');
    const pay = app.requireModule("eeui/pay");
    export default {
        data() {
            return {
                img: 'https://icweiliimg1.pstatp.com/weili/l/540018848208912837.webp',
                orderForm: {},
                id: '',
                orderLog: '',
                currentTab: 0,
                payments: [],
                left_time: "00:00",
                timeType: false,
                itemList: [],
                timeValue: '',
                value: 'yyyy-MM-dd',
                timer: null
            }
        },
        created() {
            this.initIconFont()
            this.id = app.config.params
        },
        components: {
            myNavbar
        },
        mounted() {
            this.findClick(this.id)
        },
        methods: {
            refundsClick() {
				if(this.checkPermission(['return.received'])==false){
					eeui.alert('您没有退款权限', function() {
					  
					});
					 return
				}
                var _this = this
                eeui.confirm({
                    title: "温馨提示",
                    message: "是否确认退款？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        received(_this.id).then(response => {
                            storage.setItem('returnsDetails', 'true')
                            _this.findClick(_this.id)
                        })
                    }
                });
            },
            findClick(data) {
                var _this = this
                find(data).then(
                    res => {
                        if (res.type == 'success') {
                            _this.orderForm = res.data.return
                            _this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
                            if (!this.isEmptyString(res.data.orderLog)) {
                                res.data.orderLog.forEach(function(item) {
                                    item.createDate = _this.formatTime(item.createDate)
                                })
                                _this.orderLog = res.data.orderLog
                            }
                            _this.orderForm.itemList.forEach(function(item) {
                                item.quantity = parseInt(item.quantity)
                                item.price = parseFloat(item.price).toFixed(2)
                                if (item.thumbnail != undefined){
                                    item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
                                }
                            })
                            _this.itemList = _this.orderForm.itemList
                            _this.payments = res.data.payments;
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            copyClick() {
                eeui.copyText(this.orderForm.sn)
                eeui.toast('复制成功')
            },
            copyAddressClick(){
                eeui.toast('复制成功')
                eeui.copyText(this.orderForm.consignee + this.orderForm.phone  + this.orderForm.address)
            }
        }
    }
</script>
<style lang="css" src="../../style/wx.css" />
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }

    .submit_isMask_product_quantity {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        margin-top: 16px;
    }
    .isMask_botton {
        width: 640px;
        height: 158px;
        border-style: solid;
        border-top-width: 1px;
        border-color:rgba(0, 0, 0, 0.05) ;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        display: flex;
        flex-direction: row;
        background-color: white;
    }
    .button-click{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 50px;
        margin-left: 20px;
        border-radius: 5px;
        width: 120px;
        background-color: #409EFF;
    }
    .disagree-click{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 50px;
        margin-left: 20px;
        border-radius: 5px;
        width: 120px;
        background-image: linear-gradient(to left, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
    }
    .button_content{
        width: 750px;
        height: 100px;
        position: fixed;
        bottom: 0;
        background-color: white;
        display: flex;
        flex-direction: row;
        padding-right: 20px;
        justify-content: flex-end;
        align-items: center;
    }
    .details_box_header_bg {
        width: 750px;
        height: 560px;
        background-image: linear-gradient(to bottom, rgba(194, 194, 194,0.8), rgba(248, 248, 248, 1));
        position: absolute;
        top: 0;
    }

    .details_status {
        padding-left: 30px;
        padding-right: 50px;
        box-sizing: border-box;
        z-index: 0;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .details_status_title {
        font-size: 44px;
        font-weight: 600;
        color: rgba(26, 26, 30, 1);
        /*line-height: 56px;*/
    }

    .details_status_subtitle {
        font-size: 24px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-left: 25px;
        margin-bottom: 2px;
    }


    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        margin: 0 20px;
        color: #cccccc;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        box-sizing: border-box;
    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        margin-left: 10px;
    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 24px;
        font-weight: 400;
        width: 570px;
        color: rgba(26, 26, 30, 1);
        /*margin-left: 12px;*/
    }

    .details_address_label {
        /*width: 66px;*/
        /*height: 34px;*/
        border-style: solid;
        border-width: 2px;
        border-color: rgba(235, 89, 79, 1);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_address_label_box {
        width: 66px;
        height: 34px;
        background-color: rgba(235, 89, 79, 1);
        border-style: solid;
        border-width: 1px;
        border-color: white;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .details_address_label_title {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .details_order {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .details_order_item {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;
        width: 460px;
        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom:5px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 1;
        width: 370px;
    }


    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
        text-overflow: ellipsis;
        lines:2;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        width: 370px;
        text-overflow: ellipsis;
    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_order_item_bottom {
        padding-top: 40px;
        border-top-color: rgba(232, 234, 237, 1);
        border-top-width: 1px;
        border-top-style: solid;
    }

    .row_sb_mg20 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .details_order_item_bottom_titel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_item_bottom_totalTitel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_black_icon {
        font-size: 20px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_black_font {
        font-size: 22px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_information {
        width: 700px;
        padding: 40px 25px 10px 25px;
        border-radius: 16px;
        background-color: white;
        box-sizing: border-box;
        margin-left: 25px;
        margin-top: 20px;
        margin-bottom: 30px;
    }


    .details_information {
        width: 700px;
        margin-left: 25px;
        background-color: white;
        border-radius: 16px;
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: content-box;
    }

    .details_information_title {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_information_title_current {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.8;
    }

    .details_information_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_information_line {
        width: 1px;
        height: 50px;
        box-sizing: border-box;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: rgba(0, 0, 0, 0.2);
    }

    .details_information_line_current {
        width: 1px;
        height: 50px;
        border-left-color: rgba(237, 86, 75, 0.719);
        border-left-style: dashed;
        border-left-width: 2px;
        box-sizing: border-box;
    }

    .details_information_round {
        width: 50px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_round_current {
        width: 50px;
        height: 50px;
        background-image: linear-gradient(129deg, rgba(237, 86, 75, 0.719), rgb(247, 150, 120));
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_icon {
        font-family: iconfont2;
        font-size: 20px;

        color: rgba(0, 0, 0, 0.5);
    }

    .details_information_icon_current {

        font-family: iconfont2;
        font-size: 20px;
        color: white;
    }

    .details_information_content {
        display: flex;
        flex-direction: row;
    }

    .details_information_text {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .details_information_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
    }

    .details_information_row_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-right: 40px;
    }

    .details_information_row_content {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .details_information_row_botton {
        font-size: 24px;
        font-weight: 400;
        color: rgba(103, 130, 192, 1);
    }

    .details_information_row_line {
        width: 1px;
        height: 24px;
        background-color: rgba(232, 234, 237, 1);
        margin-left: 20px;
        margin-right: 20px;
    }

    .submit_payMethod {
        width: 690px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 30px;
        margin-top: 30px;
        background-color: white;
        border-radius: 16px;
    }

    .submit_payMethod_Header_Title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .submit_payMethod_Content {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    .submit_payMethod_Content_Column {
        display: flex;
        flex-direction: column;
    }

    .submit_payMethod_Content_Title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: block;
    }

    .submit_payMethod_Content_SubTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        display: block;
    }

    .orderDate {
        display: block;
        margin-top: 20px;
        color: white;
        font-size: 30px;
        letter-spacing: 2px
    }
    .details_lines{
        width: 2px;
        height: 28px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 28px;
        color: red;
        margin-left: 20px;
    }
</style>
